<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2023-01-18 20:56:27
 * @LastEditors: 47
 * @LastEditTime: 2023-02-11 17:25:01
-->
<template>
  <div class="map-container">


    <div class="top">
      <van-icon name="arrow-left" size="20" @click="onClickLeft"/>
      <button class="have-btn" @click="goBottom">发送</button>
    </div>
   

    <div id="map"></div>
    
  </div>
    

</template>

<script setup>
import dayjs from 'dayjs'
import myBMap from "@/utils/bmap"; // 引入刚才创建的bmap.js文件
import { ref, onMounted } from "vue";

// 引入路由
import {useRouter,useRoute} from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 创建路由对象
const router = useRouter()
const route = useRoute()

// 解构 方法
const {addComment} = course

// 返回上一级
const onClickLeft = () => history.back();

let address = ref('')

// 跳转到 DiscussionReply 并且传递参数discussId
const goBottom = async () =>{

  //发请求 
  const commentObj={
    id:route.params.noticeId || route.params.discussId,
    //code是区别通知的评论还是讨论的评论
    code:route.params.noticeId ? 1 : 2,
    userId:1,
    //type是区别是普通字符串评论还是地图
    commentType:2,
    commentTime:dayjs(new Date()).format('YYYY-MM-DD HH:mm') ,
    commentContent:address.value,
  }
  console.log(commentObj);
  await addComment(commentObj)


  if(route.params.discussId){
    router.push({
      name:'discussionreply',
      params:{
        discussId:route.params.discussId
      }
    })
  }

  if(route.params.noticeId){
    router.push({
      name:'coursenotice',
      params:{
        discussId:route.params.noticeId
      }
    })
  }
  



}

// 结合浏览器获取城市位置
const getCity = () => {

  myBMap.init().then( async(BMap) => {
    const map = new BMap.Map('map');

    let myCity = new BMap.LocalCity();
    await myCity.get(
      (result) => {
        let geoc = new BMap.Geocoder();
        geoc.getLocation(result.center, (res) => {
          address.value = res.addressComponents.city + res.addressComponents.district + res.addressComponents.street + res.addressComponents.streetNumber
          console.log(address.value);
          map.centerAndZoom(res.addressComponents.city,12);  // 初始化地图
          map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        });
      },
      { enableHighAccuracy: true }
    );
    
  });

 
};

onMounted(() => {
  getCity(); // 获取城市
});

</script>

<style  scoped lang="less">
.map-container{
  position: relative;
  .top{
    :deep(.van-icon ){
      line-height: 38px;
    }
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    .have-btn{
      font-size: 12px;
      margin: 8px 5px;
      height: 20px;
      width: 40px;
      border-radius: 5px;
      color: #ffffff;
      border: 1px solid #b3b3b3;
      background-color: #0199fe;

    }
  }
  
   
}
   
#map{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 667px;
}
</style>

